import React,{ useEffect,useState } from 'react'
import './index.css'
import { Button, Form, Input ,message} from 'antd';
import { useNavigate } from 'react-router-dom'
import { login } from '../../api/login'
const Login = () => {

    const navigete=useNavigate()
    // 提交
    const onFinish = async (values) => {
        const res=await login('/login',values);
        console.log(res)
        localStorage.setItem('token',res.data.token)
        if(res.data.code===200){
            navigete('/layout/housing')
            message.success(res.data.msg)
        }else if(res.data.code===401){
            message.success(res.data.msg)
        }
        else{
            message.error(res.data.msg)
        }
    };
    // 失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    
    return (
        <div className='login'>
            <div className='login-box'>
                <div className='title'>宏烨找房后台管理</div>
                <Form
                    labelCol={{
                        span: 6,
                    }}
                    wrapperCol={{
                        span: 13,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    className='login-item'
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入密码!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 10,
                            span: 10,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                    
                </Form>
            </div>
        </div>

    );
};
export default Login;